<template>
  <!-- 折叠容器
       'is-collapse': isCollapse 根据isCollapse判断是否应用折叠样式
  -->
  <div class="collapse-container" :class="{ 'is-collapse': isCollapse }">
    <!-- 通过控制max-height来达到折叠/展开的效果 -->
    <div class="collapse-el" :class="isExpand ? 'expand' : ''">
      <!-- 利用css使折叠组始终在最右侧 -->
      <div class="right-group box-row box-center-end">
        <slot name="prefix"></slot>
        <div @click="isExpand = !isExpand">
          <slot name="collapse" v-bind="{ isExpand }" v-if="isCollapse">
            <el-button
              class="expand-btn btn-text"
              :icon="isExpand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            >
              {{ isExpand ? "收起" : "展开" }}
            </el-button>
          </slot>
        </div>
        <slot name="suffix"></slot>
      </div>
      <!-- 折叠面板 -->
      <div ref="collapsePanel" class="collapsepanel-el" :class="panelClass">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script >
import { mixinObserver } from "@/components/mixin/Observer";
/**
 *
 * 列表查询头组件，可以根据传入关联数据动态控制具体按钮显示隐藏
 */
export default {
  name: "UxCollapse",

  mixins: [mixinObserver],

  props: {
    /**
     * @description 折叠面板样式，内置between样式）
     * between 每项宽度固定为1/3,输入框最大长度不超过340px
     *         默认输入框长度自动
     * @param {*}
     * @return {*}
     */
    panelClass: {
      type: String,
    },
  },

  data() {
    return {
      // 是否开启折叠/展开功能（自动计算获取）
      isCollapse: false,
      // 折叠面板是否展开（isCollapse为true时生效）
      isExpand: false,
    };
  },

  watch: {
    isExpand(v) {
      // 抛出事件
      this.$emit("expandchange", v);
    },
  },

  methods: {
    /**
     * @description  计算是否开启折叠/展开功能
     */
    adjustLayout() {
      const me = this;
      me.$nextTick(() => {
        // 获取容器dom
        const el = me.$el;
        if (el) {
          // 延迟执行保证获取到子元素
          setTimeout(() => {
            // 获取容器高度
            const maxHeight = el.clientHeight;
            // 获取折叠面板dom
            const collapsePanel = me.$refs.collapsePanel;
            // 判断是否开启折叠/展开功能
            me.isCollapse = collapsePanel.clientHeight > maxHeight;
            // console.log(
            //   collapsePanel.clientHeight,
            //   el.clientHeight,
            //   me.isCollapse
            // );
            // 某些情况下（视图被隐藏）高度是0，没办法计算是否开启折叠/展开功能，这个时候就通过观察模式来监听容器变化，以便重新计算
            if (!maxHeight) {
              me.startObserver(collapsePanel);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/sass/all.scss";

// 开启折叠/展开功能后容器样式
.is-collapse {
  // flex布局高度计算才能使用百分百
  display: flex;
  // 收起/展开按钮
  .expand-btn {
    margin-right: 16px;
  }
}

$max-height: 55px;
// 折叠容器
::v-deep.collapse-container {
  width: 100%;
  .collapse-el {
    width: 100%;
    overflow: hidden;
    // 通过设置最大高度来实现折叠时只显示一行的效果
    max-height: $max-height;
    &.expand {
      // 展开状态取消最大高度限制,实现展开效果
      max-height: none;
    }
    // 伪类动态设置高度实现将折叠组挤到最下方的效果
    &::before {
      content: "";
      height: calc(100% - 55px);
      float: right;
    }
  }
  .right-group {
    // 保证折叠组始终在最右方
    float: right;
    clear: both;
    margin-top: 11px;
    // 除展开按钮外其它按钮设置最小宽度
    .el-button:not(.expand-btn) {
      min-width: 54px; //104px
    }
  }
}

// 面板默认布局
::v-deep.collapsepanel-el {
  .item-el {
    display: inline-block;
    padding: 11px 20px 11px 0;
  }
  .el-form-item {
    margin: 0;
    .el-form-item__content {
      & > div {
        width: 100%;
      }
    }
  }
}

// 每项宽度固定为1/3,输入框最大长度不超过340px
::v-deep.between {
  .item-el {
    width: 25%;
    padding: 11px 0 11px 0;
  }
  .el-form-item {
    @extend .box-row;
    .el-form-item__content {
      @extend .box-flex1;
      max-width: 280px;
    }
  }
  // 第二列居中
  .item-el:nth-child(4n-1) {
    .el-form-item {
      justify-content: center;
    }
  }
  // 第三列居右
  .item-el:nth-child(4n) {
    .el-form-item {
      justify-content: flex-end;
    }
  }
}
</style>
